<template>
    <common-container v-loading="loading" element-loading-spinner="el-icon-loading" element-loading-text="拼命加载中…">
        <div slot="common-search">
            <!-- <div class="common-btn">
                <el-button type="primary" size="mini" @click="exportExcelChild">导出excel</el-button>
            </div> -->

            <div class="search-common">
                <el-form :inline="true" :model="searchForm" ref="searchForm" size="mini">

                    <el-row :gutter="10">
                        <el-col :sm="8">
                            <el-form-item label="订单编号" prop="recode_name">
                                <el-input placeholder="请输入订单编号" v-model="searchForm.order_code" class="input-with-select">

                                </el-input>
                            </el-form-item>
                        </el-col>

                        <el-col :sm="10">
                            <el-form-item label="订单创建时间">
                                <el-date-picker v-model="searchForm.orderTime" :picker-options="pickerOptions" type="daterange" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :sm="6">
                            <el-form-item>
                                <el-button type="primary" @click="searchFromChild">查询</el-button>
                                <el-button type="info" @click="resetForm('searchForm')">重置</el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>

        </div>
        <div slot="common-body">
            <template v-for="item of  tableData">
                <div class="order_table-list" :key="item.id">
                    <div class="order_table-item color-6d727a" @click="showOrderList(item)">
                        <i class="pl10" :class="[item.isShow?'el-icon-arrow-down':'el-icon-arrow-right']"></i>
                        <span>订单编号：
                            <strong class="bold"> {{item.code}}</strong>
                        </span>
                        <span>订单创建时间：{{item.create_time}}</span>
                        <span>订单状态：
                            <i v-if="item.order_state==0">支付成功</i>
                            <i v-else-if="item.order_state==1">处理中</i>
                            <i v-else-if="item.order_state==2">已处理</i>
                        </span>
                        <span>支付金额：
                            <strong class="bold"> {{item.order_money}}</strong>
                        </span>
                        <span>创建者：{{item.create_name}}</span>
                        <span>转账流水号：{{item.bank_seq}}</span>
                    </div>
                    <div class="order_table_child" v-show="item.isShow">
                        <!-- <div class="common-btn">
                            <el-button type="primary" size="mini" @click="exportExcelChild">确认下单</el-button>
                            <el-button type="danger" size="mini" @click="exportExcelChild">标记为已作废</el-button>
                            <el-button type="success" size="mini" @click="exportExcelChild">导出该订单</el-button>
                        </div> -->
                        <div class="order_position-height">
                            <el-table :data="item.children" border style="width: 100%" size="mini">
                                <el-table-column prop="subitem_code" label="子订单号">
                                </el-table-column>
                                <el-table-column prop="shares_name" label="股票名称">
                                </el-table-column>
                                <el-table-column prop="principal" label="名义本金">
                                </el-table-column>
                                <el-table-column prop="trans_date" label="交易日">
                                </el-table-column>
                                <el-table-column prop="cycle" label="合约期限">
                                </el-table-column>
                                <el-table-column prop="shares_price" label="期望权利价格">
                                </el-table-column>
                                <el-table-column prop="pay_ratio" label="成交权利金比例">
                                </el-table-column>
                                <el-table-column prop="pay_money" label="支付权利金">
                                </el-table-column>
                                <el-table-column prop="" label="子订单状态">
                                    <template slot-scope="scope">
                                        <span v-if="scope.row.order_state==0">支付成功</span>
                                        <span v-else-if="scope.row.order_state==1">已作废</span>
                                        <span v-else-if="scope.row.order_state==2">交易成功</span>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="" label="成交权利价格">
                                    <template slot-scope="scope">
                                        {{scope.row.fact_price==0?'-':scope.row.fact_price}}
                                    </template>

                                </el-table-column>
                                <el-table-column prop="" label="行权状态">
                                    <template slot-scope="scope">
                                        <span v-if="scope.row.exercise_state==0">未行权</span>
                                        <span v-else-if="scope.row.exercise_state==1">行权处理中</span>
                                        <span v-else-if="scope.row.exercise_state==2">已行权</span>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="" label="实际行权时间">
                                    <template slot-scope="scope">
                                        {{scope.row.exercise_time==0?'-':scope.row.exercise_time}}
                                    </template>
                                </el-table-column>
                                <el-table-column prop="" label="行权价格">
                                    <template slot-scope="scope">
                                        {{scope.row.fact_exercise_price==0?'-':scope.row.fact_exercise_price}}
                                    </template>
                                </el-table-column>
                                <el-table-column prop="" label="结算金额">
                                    <template slot-scope="scope">
                                        {{scope.row.settle_money==0?'-':scope.row.settle_money}}
                                    </template>
                                </el-table-column>
                                <el-table-column prop="" label="实际盈亏">
                                    <template slot-scope="scope">
                                        {{scope.row.fact_profit==0?'-':scope.row.fact_profit}}
                                    </template>
                                </el-table-column>
                                <el-table-column prop="" label="操作">
                                    <template slot-scope="scope">
                                        <el-button v-if="scope.row.order_state==2&&scope.row.exercise_state==0" type="text" size="mini" @click="apply(scope.row)">申请行权</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </div>
                </div>
            </template>

            <el-dialog title="申请行权" :visible.sync="dialogMarkVisible">

                <el-form ref="applyForm" :model="applyForm" label-width="100px">
                    <el-form-item label="行权股票">
                        <el-input v-model="applyForm.shares_name" disabled="disabled" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="权利价格">
                        <el-input v-model="applyForm.fact_price" disabled="disabled" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="支付权利金">
                        <el-input v-model="applyForm.pay_money" disabled="disabled" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="申请行权价格">
                        <el-input v-model="applyForm.price" auto-complete="off"></el-input>
                    </el-form-item>

                </el-form>

                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogMarkVisible = false">取 消</el-button>
                    <el-button type="primary" @click="markDownService">确 定</el-button>
                </div>
            </el-dialog>

        </div>
        <div slot="common-page">
            <page-pagination v-on:pageFun="pageFunNumber" :page="page" :pageSize="pageSize" :total="total"></page-pagination>
        </div>
    </common-container>
</template>

<script>
import service from "@/service";
import pagePagination from "@/components/Common/pagePagination";
// import commonDialog from "@/components/Common/CommonDialog";
import commonContainer from "@/components/Common/CommonContainer";
import { computedDay184, dateFormat } from '@/assets/utils.js'
export default {
    props: ['breadcrumb'],
    data() {
        return {
            page: 1,
            pageSize: 10,
            total: 0,
            loading: false,
            dialogMarkVisible: false,
            tableData: [],
            searchForm: {
                order_code: '',
                orderTime: [],

            },
            applyForm: {

            },
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                }
            }
        }
    },
    created() {
        this.$store.dispatch('setNavName', this.breadcrumb);
        this.queryTableList();
    },
    methods: {
        //点击展开
        async showOrderList(item) {

            let res = await service.haiheiQueryOrderSubInfoForProxyServer({
                order_code: item.code
            })
            if (res.success) {
                item.isShow = !item.isShow;
                item.children = res.result;
            }

        },
        //查询列表
        async  queryTableList(page = 1) {
            let params = {
                order_code: this.searchForm.order_code,
                beginTime: this.searchForm.orderTime[0] || '',
                endTime: this.searchForm.orderTime[1] || '',
                page: page,
                pageSize: this.pageSize,
            }
            console.log(params)
            let res = await service.haiheiQueryOrderInfoForProxyServer(params)
            if (res.success) {
                let result = res.result.pageList
                for (let ite of result) {
                    ite.isShow = false;
                }
                this.tableData = result;
                this.total = res.result.nums;
                this.page = res.result.page;
                this.pageSize = res.result.pageSize;
            } else {
                this.$message({
                    type: "error",
                    message: res.msg
                });
            }
        },
        //分页
        pageFunNumber(page) {
            this.queryTableList(page);
        },

        //申请行全
        apply(item) {
            console.log(item)
            this.applyForm = Object.assign({}, item, { price: '' });
            this.dialogMarkVisible = true;
        },
        async markDownService() {
            let params = {
                orderSubCode: this.applyForm.subitem_code,
                price: this.applyForm.price
            }
            console.log(params);
            let res = await service.haiheiApplyExerciseServer(params)
            if (res.success) {
                this.$message({
                    type: "success",
                    message: '申请成功'
                });
                this.dialogMarkVisible = false
                this.queryTableList();
            } else {
                this.$message({
                    type: "error",
                    message: res.msg
                });
            }
        },
        //导出
        exportExcelChild() {

        },
        //查询
        searchFromChild() {
            this.queryTableList();
        },
        //重置
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }
    },
    components: {
        pagePagination,
        commonContainer
    }
}
</script>

<style scoped>
.order_table-list {
  border: 1px solid #f2f2f2;
  border-bottom: 0;
}
.order_table-list:last-child {
  border-bottom: 1px solid #f2f2f2;
}
.order_table-item {
  display: flex;
  align-items: center;
  cursor: pointer;
}
.order_table-item span {
  flex: 1;
  padding: 15px 10px;
}
.order_table_child {
  border-top: 1px solid #f2f2f2;
  background: #f2f2f2;
  padding: 10px;
}
.order_position-height {
  height: 300px;
  overflow: auto;
}
</style>